Day20 例外處理(try...catch)

15th鐵人賽

yenchenjulia

團隊好想工作室 v7.0

2023-10-05 06:42:57

385 瀏覽

分享至

技術筆記

這禮拜預計要跟mentor進行code review我的js17 Q1~Q5，得先來複習一下，怕被問到答不出來會很囧，第一個先來看try...catch這個我從學長姐那觀摩學來的用法

throw

用來拋出例外並非只有錯誤，可以客製化我們要對該例外的描述，透過更口語化的訊息，讓使用者清楚明瞭並加以改正。
可拋出不同類型的例外訊息
以下擷取ＭＤＮ範例

throw "Error2"; // 字串形態
throw 42; // 數字形態
throw true; // True/False
throw {
  toString: function () {
    return "我是物件!";
  },
};

return跟throw的差別
- 兩者都可以中斷程式碼
- return只能用於function，throw任何地方都可以用
- return可不回傳值，throw一定要回傳值

try...catch

try{
要做的事
} catch(e) {
例外處理
}

try：要測試的程式區塊，必須包含1或多個陳述式
catch：如果try內含程式區塊出現error，則會將控制權轉給catch，並利用函式中的throw語法拋出error.message
finally：可加可不加，在執行完try或catch完，在接續其他程式執行前，finally區塊一定會先被執行

以下同樣引述ＭＤＮ範例

您可以使用 finally 區塊來使腳本在發生例外時正常地結束。例如，您可能需要釋放腳本中綁定的資源。在以下示例中，打開一個文件，然後執行使用該文件的陳述式（伺服器端 JavaScript 允許您訪問文件）。如果在打開文件時拋出例外，finally 區塊會在腳本結束之前關閉文件。

openMyFile();
try {
  writeMyFile(theData); // 可能產生例外
} catch (e) {
  handleError(e); // 處理可能發生的例外
} finally {
  closeMyFile(); // 總是在 try 結束後關閉檔案
}

範例

假設題目欲要求使用者輸入年齡以進行分類，可能錯誤有：
1. 使用者沒有輸入任何值，直接按enter
2. 使用者輸入非數字
3. 使用者輸入負數
4. 其他

main()

function main() {  
 const input = prompt('你好,請問你幾歲？')
 try {
 
   isRequiredInput(input)
   isInteger(input);
   isNegative(input);
   
   ...//其他需執行程式

 } catch (error) {
   console.log(error.message);
   return main()
 }  
}





function isRequiredInput(value) {
 if (value === "") {
   throw new Error("未輸入喔！")
 }
}

function isInteger(number) {
 if (!Number.isInteger(+number)) {
   throw new Error("請輸入整數阿拉伯數字喔！");
 }
}

function isNegative(number) {
 if (+number < 0) {
   throw new Error("不能小於0啦")
 }
}

相對應錯誤訊息回覆如下：

如此一來，使用者就可以很清楚知道錯誤在哪，可增加使用者體驗。

心得

工作上的學習最讓我印象深刻的就是excel，當時什麼都不會的我，就是趕快學著依樣畫葫蘆的把每天的報表分析生出來，尚無時間理解箇中奧妙，但至少能先應付眼前的工作，因為這個方法還算有效，所以來這自學解任務，當沒有方向時，我也會選擇先看一下學長姐的檔案，讓自己有個底，之後在打造超人系列的書裡也看到類似的學習方式，才知道原來這就是所謂的肌肉學習，我覺得對於初學者來說，這招蠻有效的，而且可以降低挫折感。try...catch也是我這樣看來的，以前從來沒有看過這個語法，同樣的，對它的體會還不是很深刻，但至少先會用了。